<template>
  <div class='simple'>
    <p ref='time'>{{ time }}</p>
    <db-play 
      :data='data' 
      left 
      right
      :onLoadedMetaData='onLoadedMetaData'
      :onMusicUpdate='onMusicUpdate'
      style='font-size:45px'></db-play>
    <p >{{ timeall }}</p>
  </div>
</template>

<script>
import play from '../src/views/Play'
export default {
  data() {
    return {
      data:[
        'https://isure.stream.qqmusic.qq.com/C400004RMZFA2C6qsu.m4a?guid=1813080844&vkey=9EF6ACD3D7120B7D306660F5CAD1065B637FB035FC62A36DDCBAFC68B2DF3C33453549D3C5BE4C861C575A2FE53BDB1659ECF724A2423CBE&uin=0&fromtag=66',
        'https://isure.stream.qqmusic.qq.com/C400002zY5xa3FKDaB.m4a?guid=1813080844&vkey=D19B04D441B7EDA91D30DCE3C76AF21C93975A3E16F064F1C86544D2184A21373BF9D30A88902C88832B849D8D34ED7DFA11B9CF2C612C2E&uin=0&fromtag=66',
        'https://isure.stream.qqmusic.qq.com/C400001X66lF1M9eL9.m4a?guid=1813080844&vkey=8A579A61D6F539930BEDCA9AEC6BC3DE21976287CB4DE1AE50BCE6A4A58C825DB2F11C66A3C1CE1AC0EDFD6C9266E758CA285C2460EEBF9F&uin=0&fromtag=66',
        'https://isure.stream.qqmusic.qq.com/C400001F8BTd1TZYWZ.m4a?guid=1813080844&vkey=978D0668F8A077D26584411BF1E1F02A72E65F9ABD10F9111E031C61A163B5B550CB613CAC3E31710AFDA7988308CF97A99D509696934797&uin=0&fromtag=66',
        'https://isure.stream.qqmusic.qq.com/C400004WEIjY0aSgWM.m4a?guid=1813080844&vkey=AB8DBDD9D4F873FDE1063044589FF92EC1E3937395A22F83BE61C042CCAA112203CCE1A9625BA3D1EAC944A90C852A5C4C812E49DD20C0C0&uin=0&fromtag=66',
      ],
      time:null,
      timeall:null,
    }
  },
  props:{
    setCurrent:Function,
    setDir: Function,
  },
  components:{
    'db-play':play
  },
  methods:{
    onLoadedMetaData(  currentTime, duration, data ) {
      this.timeall = data.duration
      this.setDir( duration )
    },
    onMusicUpdate( currentTime, duration, data ) {
      // console.log( currentTime, duration, data )
      this.time = data.currentTime
      this.setCurrent( currentTime, duration )
    }
  }
}
</script>

<style scoped>
.simple {
  width:100%;
  height:150px;
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>